<template>
<div class="cart">
    <!-- 标题栏 -->
    <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
            <van-icon name="chat-o" dot size='18'/>
        </template>
    </van-nav-bar>
   

    <!-- 商品卡片 -->
    <div class="cart-con">
        <div v-for='item in list' :key="item._id" >
        <van-swipe-cell>
            <van-row>
                <van-col span="4" >
                    <van-checkbox v-model="checked" class="check"></van-checkbox>
                </van-col>
                <van-col span="20" >
                    <van-card
                        :num="item.num"
                        :price="item.good.price"
                        :desc="item.good.desc"
                        :title="item.good.name"
                        :thumb="item.good.img"
                    >
                <template #tags>
                    <!-- <van-tag plain type="danger"></van-tag>
                    
                    <van-tag plain type="danger"></van-tag> -->
                </template>
            <template #footer>
                <van-button size="small" @touchstart='onUpdate("sub", item)'>-</van-button>
                <van-button size="small" @touchstart='onUpdate("add",item)'>+</van-button>
            </template>
            </van-card>
                </van-col>
            </van-row>
            <template #right>
                <van-button @touchstart='onDelete(item)' square text="删除" type="danger" class="delete-button" />
            </template>
        </van-swipe-cell> 
       
        </div>
        </div> 
        <!-- 提交订单 --> 
        <van-submit-bar :price="19900" button-text="提交订单" @submit="onSubmit">
            <van-checkbox v-model="checked">全选</van-checkbox>
        <template #tip>
            你的收货地址不支持同城送, <span @click="onClickEditAddress" class="tips">修改地址</span>
        </template>
    </van-submit-bar>
    
     
</div>
</template>

    
<script>
import{
    NavBar,
    Icon,
    SubmitBar,
    checkbox,
    Card,
    Tag,
    Button,
    Col, 
    Row,
    Checkbox,
    SwipeCell,
    Toast
} from 'vant'

import { mapActions , mapState} from 'vuex'
export default {
    name:'cart',
    data(){
        return{
            checked:true
        }
    },
    components:{
        [NavBar.name]:NavBar,
        [Icon.name]:Icon,
        [SubmitBar.name]:SubmitBar,
        [checkbox.name]:checkbox,
        [Card.name]:Card,
        [Tag.name]:Tag,
        [Button.name]:Button,
        [Col.name]:Col,
        [Row.name]:Row,
        [Checkbox.name]:Checkbox,
        [SwipeCell.name]: SwipeCell
    },
    computed:{
        ...mapState('cart',['list'])
    },
    mounted(){
        this.getCart({})
    },

    
    methods:{
        ...mapActions('cart',['getCart']),
        onClickLeft(){
            this.$router.back()
        },
        onSubmit(){
            console.log('我去买单')
        },
        onClickEditAddress(){
            console.log('我去填写地址了')
        },
        onDelete(item){
            let params={
                id:item._id
            }
            this.$http.deleteCart(params).then(()=>{
                Toast('删除成功')
                this.getCart({});
            })
        },
        onUpdate(type,item){
            //修改商品数量
            if(type=='sub' && item.num==1) return Toast('数量不能小于1')
            let data ={
                id:item._id,
                num:type=='sub' ? item.num-1 : item.num+1
            }
            this.$http.updateCart(data).then(()=>{
                Toast('数量修改成功')
                this.getCart()//刷新购物车
            })
        }
    }
}
</script>
<style lang="scss">
    .cart{
        .cart-con{
            margin-bottom: 2.2rem;
        }
        .tips{
            color: blue;
        }
        // .van-submit-bar{
            // position: absolute;
            // bottom: 1.6rem;
        // }
        .van-col .van-checkbox{
            margin-left: 20px;
            margin-top: 60px ;
        }
        .van-col .van-card{
            margin-top: 10px;
            background: white;
        }
        .delete-button{
            height: 100%;
        }
        
    }
</style>